js获取指定元素的光标位置，并在光标位置后增加值

2024-07-16 04:59| 来源: 网络整理| 查看: 265

利用js的selection操作，地址：https://developer.mozila.org/en-US/docs/Web/API/Selection

HTML代码： js代码： var mousePlace = getCursortPosition(document.getElementsByClassName("showOptions_content")[0]);//获取光标的位置insertSpan(".showOptions_content",mousePlace,"测试数据");//重新给类名为showOptions_content的元素重新赋值 /** * 插入指定元素到指定位置 * 参数： * target：需要插入元素的目标id（在字符串前加#，例："#showOptions"）或者class类名（在字符串前加.例：".showOptions"） * placeNum：插入到元素的位置， * contenTxt：需要插入的内容 * className：需要往目标元素中插入的元素的类名，数组（多个类名用）或者字符串（单个类名），可以不传 * **/ function insertSpan(target,placeNum,contenTxt) { if($(target) && ($(target).length > 0)){ var tempValue = $(target).val().substr(placeNum);//临时存储条件框鼠标位置后面的值 /** * 实现逻辑：将原来元素的值根据光标的位置后面的值截取出来，临时保存， * 然后在将光标位置之间的值截取出来加上需要增加的值，然后将刚刚临时保存的 * 光标后面的元素加上，最后将这个加起来的值重新复制给内容框 * **/ var newValue = $(target).val().substr(0,placeNum).trim() + " " + contenTxt.trim() + " " + tempValue.trim(); $(target).val(newValue.trim()); setCaretPosition($(target)[0],placeNum + contenTxt.length + 1); }else{ console.error("需要插入指值的目标元素不存在"); } } /** * 获取光标位置 * 参数： * ctrl：需要获取位置的元素（document.getElementById("p1")，document.getElementsByClassName("current")[0]） * 返回值： * CaretPos：返回光标当前的位置 * **/ function getCursortPosition (ctrl) { //获取光标位置函数 var CaretPos = 0; // IE Support if (document.selection) { ctrl.focus (); // 获取焦点 var Sel = document.selection.createRange (); // 创建选定区域 Sel.moveStart('character', -ctrl.value.length); // 移动开始点到最左边位置 CaretPos = Sel.text.length; // 获取当前选定区的文本内容长度 } // Firefox,Chrome,edg support else if (ctrl.selectionStart || (ctrl.selectionStart === '0')) { CaretPos =ctrl.selectionStart; // 获取选定区的开始点 } return CaretPos; } // 设置光标位置 function setCaretPosition(ctrl, pos) { //设置光标位置函数 if(ctrl.setSelectionRange) { ctrl.focus(); // 获取焦点 ctrl.setSelectionRange(pos,pos); // 设置选定区的开始和结束点 } else if (ctrl.createTextRange) { var range = ctrl.createTextRange(); // 创建选定区 range.collapse(true); // 设置为折叠,即光标起点和结束点重叠在一起 range.moveEnd('character', pos); // 移动结束点 range.moveStart('character', pos); // 移动开始点 range.select(); // 选定当前区域 } }

上面给指定元素的位置插值，这个方法是根据别人的实例修改的，实例如下，因为这个示例是在目标元素内不断增加子元素，但是我的需求是往往某个元素中增加文字，比如往textarea标签中不断增加指定字符串，所以我根据下面的示例修改了一下。

// 插入指定元素到指定位置 selection

Hello World

function insertSpan() { var oP1 = document.getElementById("p1"); var oHello = oP1.firstChild.firstChild; var oWorld = oP1.lastChild; var oRange = document.createRange(); var oSpan = document.createElement("span"); oSpan.style.color = "red"; oSpan.appendChild(document.createTextNode("Inserted text")); oRange.setStart(oHello, 2); oRange.setEnd(oWorld, 3); oRange.insertNode(oSpan); }

原文地址：https://www.jianshu.com/p/c85958c277b7

【本文地址】

公司简介

联系我们